<template>
  <el-dialog title="商品退货单详情" :close-on-click-modal="false" :visible.sync="visible" fullscreen center>
    <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
      <el-row>
        <el-link  style="margin-right:15px;" :href="printUrl" target="_blank" type="info">
          <el-button type="info" @click="getPrintParams">打印单据(品牌)</el-button>
          <el-button type="info" @click="getPrintParams2">打印单据(商品)</el-button>
        </el-link>
      </el-row>
      <el-divider content-position="left">单据信息</el-divider>
      <el-form :model="dataForm" ref="dataForm" label-width="90px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="单据编号" prop="returnBillId">
              <el-input v-model="dataForm.returnBillId" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单据日期" prop="createTime">
              <el-input v-model="dataForm.createTime" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="入库类型" prop="returnType">
              <el-input v-model="dataForm.returnType" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="制造商" prop="supplyName">
              <el-input v-model="dataForm.supplyName" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发出仓位" prop="outStockName">
              <el-input v-model="dataForm.outStockName" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="制单人" prop="createUserName">
              <el-input v-model="dataForm.createUsername"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="审核人" prop="auditUserName">
              <el-input v-model="dataForm.auditUsername"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="运单号" prop="transportId">
              <el-input v-model="dataForm.transportId"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="memo">
              <el-input v-model="dataForm.memo"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-divider content-position="left">商品信息</el-divider>
      <div class="avue-crud">
        <el-table :data="dataList" border show-summary :summary-method="getSummaries" header-cell-class-name="miui-header-cell-style" v-loading="dataListLoading">
          <el-table-column prop="code" label="商品代码"></el-table-column>
          <el-table-column prop="viewGoodsName" label="商品名称"></el-table-column>
          <el-table-column prop="spec" label="型号"></el-table-column>
          <el-table-column prop="unitType" label="计量单位"></el-table-column>
          <el-table-column prop="number" label="数量"></el-table-column>
          <el-table-column prop="barcode" label="商品条码"></el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">关闭</el-button>
      </span>
    </el-dialog>
</template>

<script>
import { returnManagementById } from "@/api/eims/return-management"
import { mapGetters } from "vuex"
let params = '/returnBrandPrint.cpt&billId='
let params2 = '/returnGoodsPrintxqy.cpt&billId='
export default {
  data() {
    return {
      dataListLoading: false,
      visible: false,
      dataForm: {
        detailList: []
      },
      printUrl:'',
      printUrl2:'',
      dataList: []
    };
  },
  computed: {
      ...mapGetters(['bizData'])
  },
  methods: {
    init(id) {
      this.dataForm.detailList = []
      this.dataList = []
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields()
        if (this.dataForm.id) {
          this.dataListLoading = true
          returnManagementById(this.dataForm.id).then(response => {
            if(response.data.code == '0'){
              this.dataForm = response.data.data
              this.dataList = response.data.data.goodsInfos
            }else{
              this.$message.error(response.data.msg)
            }
            this.dataListLoading = false
          })
        }
      })
    },
    //   获取品牌打印的参数
    getPrintParams(){
        let billId = this.dataForm.returnBillId
        this.printUrl = this.bizData.printUrl + params + billId
    },
    //   获取品牌打印的参数
    getPrintParams2(){
        let billId = this.dataForm.returnBillId
        this.printUrl = this.bizData.printUrl + params2 + billId
    },
    // 合计
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 3) {
          sums[index] = "合计："
          return
        } else if (index === 4) {
          const values = data.map(item => Number(item[column.property]))
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0);
            sums[index] += ""
          } else {
            sums[index] = ""
          }
        }
      })
      return sums
    }
  }
}
</script>
<style>
.el-divider__text,
.el-link {
  font-size: 18px;
}
</style>
